<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message" placeholder="输入...">
        <h1>输入的内容是: {{message}}</h1>

        <textarea v-model="text" placeholder="输入..."></textarea>
        <p>输入的内容是：</p>
        <p style="white-space: pre">{{text}}</p>

        <!-- 单选按钮 -->
        <input type="radio" :checked="picked">
        <label>单选按钮</label>
        <br>
        <!-- 组合互斥效果 -->
        <!-- 数据 picked 的值与单选按钮的 value 值一致时，就会选中该项，所以当前状态下选中的是第 二项 JavaScript -->
        <input type="radio" v-model="picked2" value="html" id="html">
        <label for="html">HTML</label>
        <br>
        <input type="radio" v-model="picked2" value="js" id="js">
        <label for="js">JAVAScript</label>   
        <br>
        <input type="radio" v-model="picked2" value="css" id="css">
        <label for="css">CSS</label>  
        <p>选择的项是:{{picked}}</p>

        <!-- 复选框: -->
        <!-- 复选框也分单独使用和组合使用，不过用法稍与单选不同。
            复选框单独使用时，也是用 v-model来绑定一个布尔值 -->
        <h3>单选</h3>
        <input type="checkbox" v-model="checked" id="checked"></input>
        <label for="checked">选择状态: {{checked}}</label>

        <h3>多选</h3>
        <!-- 勾选时， value 的值也会自动 push 到 数组 checked2-->
        <input type="checkbox" v-model="checked2" value="html" id="html">
        <label for="html">HTML</label>
        <br>
        <input type="checkbox" v-model="checked2" value="js" id="js">
        <label for="js">JAVAScript</label>   
        <br>
        <input type="checkbox" v-model="checked2" value="css" id="css">
        <label for="css">CSS</label>  
        <p>选择的项是: {{checked2}}</p>

        <h1>选择列表</h1>
        <h2>单选</h2>
        <select v-model="selected">
            <option>html</option>
            <option value="js">JavaScript</option>
            <option>css</option>
        </select>
        <p>选择的项是：{{selected}}</p>
        <h2>多选</h2>
        <select v-model="selected" multiple>
            <option>html</option>
            <option value="js">JavaScript</option>
            <option>css</option>
        </select>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        // 变量app表示一个vue实例
        var app = new Vue({
            el: '#app', //用于指定一个页面中存在的Dom元素来挂载Vue示例。挂载成功后可以使用app.$el来访问该元素
            data: {
                message: '',
                text: '',
                picked: true,
                picked2: 'js',
                checked: false,
                checked2: ['html','css'],
                selected: 'html'
            }
        })
    </script>
</body>
</html>